<template>
  <div class="w-full h-full relative flex">
    <div v-if="videoUrl == ''" class=" flex-1 flex flex-c flex-col">
      <img  src="@/assets/screenimg/vievo.png" alt="" class="mx-auto  w-[120px] h-[120px] " ></img>
      <div class="text-[#a3a6ad]">
        未配置监控视频
      </div>
    </div>
    <div v-else id="mse" class="!w-full !h-full aspect-video"></div>
  </div>
</template>
<script setup lang="ts">
import videoplay from "@/components/videoplay/video.vue";
import { getVideoops } from '@/api/operate/device-management/index'
import Player,{ Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
const props = defineProps({
  deviceId: {
    type: String,
    default: ''
  }
})
const videoUrl = ref('')

onMounted(() => {
  getData()


})
const timer = ref(null)
const getData = async () => {
  const res = await getVideoops({ id: props.deviceId })
  // console.log("获取视频",res);
  videoUrl.value = res.result.url
  if (res.result.url != '') {
    const player = new Player({
      id: 'mse',
      url: videoUrl.value,
      plugins: [HlsPlugin],
    })

    player.on(Events.PLAY, () => {
		if (res.result.playDuration) {
			timer.value && clearTimeout(timer.value)
			timer.value =setTimeout(() => {
				player.pause()
			}, res.result.playDuration * 60 * 1000);
		}
	})
  }

}
onBeforeUnmount(() => {
	timer.value && clearTimeout(timer.value)
});

</script>
